<template>
  <div class="client_content">
    <el-form :inline="true" @submit.native.prevent="getClientPage">
      <el-form-item>
        <el-input v-model="keyword" placeholder="请输入客户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">搜索</el-button>
        <el-button type="text" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="dialogVisible = true">添加客户</el-button>
    <el-dialog
      title="添加客户"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">
      <el-form :model="form" status-icon :rules="rules" ref="rules" label-width="100px" class="demo-ruleForm">
        <div class="contract_header">
          <p>基础信息</p>
          <hr>
        </div>
        <el-form-item label="客户名称" prop="clientName">
          <el-input v-model="form.clientName" placeholder="请输入客户名称"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="客户级别" prop="clientLevel">
              <el-select v-model="form.clientLevel" placeholder="请选择">
                <el-option
                  v-for="(item,index) in levels"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业" prop="industry">
              <el-select v-model="form.industry" placeholder="请选择">
                <el-option
                  v-for="(item,index) in industries"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="postalCode">
              <el-input v-model="form.postalCode" placeholder="请输入邮政编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-row :gutter="20">-->
        <!--          <el-col :span="8">-->
        <!--            <el-form-item label="所在省" prop="homeProvince">-->
        <!--              <el-select v-model="form.homeProvince" placeholder="请选择">-->
        <!--                <el-option-->
        <!--                  v-for="item in options"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.value">-->
        <!--                </el-option>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="8">-->
        <!--            <el-form-item label="所在市" prop="homeCity">-->
        <!--              <el-select v-model="form.homeCity" placeholder="请选择">-->
        <!--                <el-option-->
        <!--                  v-for="item in options"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.value">-->
        <!--                </el-option>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="8">-->
        <!--            <el-form-item label="所在县" prop="homePrefecture">-->
        <!--              <el-select v-model="form.homePrefecture" placeholder="请选择">-->
        <!--                <el-option-->
        <!--                  v-for="item in options"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.value">-->
        <!--                </el-option>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->

        <el-form-item label="所在区域" prop="homeRegion">
          <el-cascader
            size="large"
            :options="regions"
            v-model="selectedRegions">
            <!--            @change="handleChange">-->
          </el-cascader>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入所在地址"></el-input>
        </el-form-item>
        <div class="contract_header">
          <p>发票信息</p>
          <hr>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="单位" prop="invoice_unit">
              <el-input v-model="form.invoice.unit" placeholder="请输入单位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税号" prop="invoice_taxNum">
              <el-input v-model="form.invoice.taxNum" placeholder="请输入税号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话" prop="invoice_phone">
              <el-input v-model="form.invoice.phone" placeholder="请输入电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="地址" prop="invoice_address">
              <el-input v-model="form.invoice.address" placeholder="请输入地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行" prop="invoice_openingBank">
              <el-input v-model="form.invoice.openingBank" placeholder="请输入开户行"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号" prop="invoice_accountNumber">
              <el-input v-model="form.invoice.accountNumber" placeholder="请输入账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">添加</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="clientList"
      style="width: 100%">
      <el-table-column
        prop="clientName"
        label="客户名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="clientLevel"
        label="客户级别"
        width="180">
      </el-table-column>
      <el-table-column
        prop="industry"
        label="行业">
      </el-table-column>
      <el-table-column
        prop="postalCode"
        label="邮政编码">
      </el-table-column>
      <el-table-column
        prop="homeProvince"
        label="所在省">
      </el-table-column>
      <el-table-column
        prop="homeCity"
        label="所在市">
      </el-table-column>
      <el-table-column
        prop="homePrefecture"
        label="所在县">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="单位">
              <span>{{ props.row.invoice.unit }}</span>
            </el-form-item>
            <el-form-item label="税号">
              <span>{{ props.row.invoice.taxNum }}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.invoice.phone }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span>{{ props.row.invoice.address }}</span>
            </el-form-item>
            <el-form-item label="开户行">
              <span>{{ props.row.invoice.openingBank }}</span>
            </el-form-item>
            <el-form-item label="账户">
              <span>{{ props.row.invoice.accountNumber }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30, 40]"
      :page-size="pageSize"
      :total="total"
      layout="sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import { list, pageClient } from '../../../api/contract/client'
// import { list, getOne, pageClient, addClient, editClient, deleteClient } from '../../../api/contract/client'

import { regionData } from 'element-china-area-data'

export default {
  name: 'Client.vue',
  data () {
    return {
      // 客户列表
      clientList: [],
      levels: ['1', '2', '3', '4', '5'],
      industries: ['行业1', '行业2', '行业3', '行业4', '行业5', '行业6'],
      regions: regionData,
      selectedRegions: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      keyword: '',
      form: {
        // 客户名称
        clientName: '',
        // 客户级别
        clientLevel: '',
        // 行业
        industry: '',
        // 邮政编码
        postalCode: '',
        // 所在省
        homeProvince: '',
        // 所在市
        homeCity: '',
        // 所在县
        homePrefecture: '',
        // 地址
        address: '',
        // 发票信息
        invoice: {
          // 单位
          unit: '',
          // 税号
          taxNum: '',
          // 电话
          phone: '',
          // 地址
          address: '',
          // 开户行
          openingBank: '',
          // 账号
          accountNumber: ''
        }
      },
      rules: {},
      dialogVisible: false
    }
  },
  created () {
    this.getClientList()
    this.getClientPage()
  },
  methods: {
    add () {
      this.dialogVisible = false
      console.log(this.selectedRegions)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    getClientList () {
      list().then(response => {
        console.log(response.data)
        this.clientList = response.data
      })
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getClientPage()
    },
    handleCurrentChange (page) {
      this.currentPage = page
      this.getClientPage()
    },
    // 在此方法中调用后端接口获取分页数据并刷新页面
    getClientPage () {
      // 发起请求并将currentPage和pageSize参数传递给后端接口
      pageClient({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      }).then(response => {
        this.clientList = response.data.records
        this.total = response.data.total
      })
    },
    reset () {
      this.keyword = ''
      this.getClientPage()
    }
  }
}
</script>

<style scoped>
  .contract_header {
    font-size: 16px;
    font-weight: bolder;
    padding-top: 5px;
    padding-bottom: 10px;
  }

  .contract_header hr {
    border-style: solid;
    border-width: 2px;
    color: #d3d3d3;
    width: 100%;
    margin-top: 10px;
  }

  .client_content {
    padding-top: 10px;
  }
</style>
